iT邦幫忙

0

前端工程日記 28日 Flex 並排選單

  • 分享至 

  • xImage
  •  

flex 精神時光屋3.雙欄選單設計
codepen 連結處:
flex 精神時光屋3.雙欄選單設計

練習六張圖,三張一行 用css的 flex-wrap: wrap;換行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <div class="left">
            <img src="https://i.imgur.com/O1TpNpL.png" alt="logo">
            <ul class="menu">
                <li><a href="#"></a>回到首頁</li>
                <li><a href="#"></a>關於我們</li>
                <li><a href="#"></a>熱銷產品</li>
                <li><a href="#"></a>購物車</li>
            </ul>
        </div>
        <div class="right">
            <h2>關於我們</h2>
            <p>Lorem ipsum dolor sit amet consectetur adip
                isicing elit. Minus vero architecto explicabo suscipit officiis
                 fugit qui perferendis. Amet repellat similique, ex deserunt saepe
                  dolor ipsum. Consectetur id dicta, odit vitae omnis repellendus 
                  nobis maxime facilis nulla facere, possimus al
                  ias.</p>
          <p>lorem            dolor ipsum. Consectetur id dicta, odit vitae omnis repellendus 
                  nobis maxime facilis nulla facere, possimus al
                  ias </p>
            <div class="rightbuttom">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
               
            </div>
        </div>
    </div>
    
</body>
</html>
.wrap{
    width: 1100px;
    height: 835px;
    display: flex;
  margin: 0 auto;
}
.left{
  background:#e7eeea;
}
ul menu{
  padding: 20px;
  line-height: 20px;
}
ul menu li{
 font-weight: 40px;
   line-height: 20px;
 font-size: 39;
 margin: 30px;
 padding: 20px;
  color:#37523d;
}
.menu li a:hover{
    background: #00ffe2;
    color: #0f503d;
  padding-top: 10px;
    padding-bottom: 10px;
}
.right{
  width: 610px;
  flex-wrap: 300px;
}
.rightbuttom{
    display: flex;
    flex-wrap: wrap;
  margin: 8px;
  justify-content:space-between;

}
h2{
 color:#37523d;
  padding-left: 87px;
  padding-top: 82px;
  padding-bottom: 34px;
}

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言